<ng-template #extra>
  <button nz-button (click)="handleCancel()" style="margin-right:10px;">
    取消
  </button>
  <button nz-button nzType="primary" (click)="submit()">
    <i nz-icon nzType="save" nzTheme="outline"></i>
    保存
  </button>
</ng-template>

<nz-card [nzTitle]="id ? '编辑插件' : '创建插件'" [nzExtra]="extra">

  <form nz-form [formGroup]="group" (ngSubmit)="submit()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="id">ID</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="IDErrorTpl">
        <input nz-input formControlName="id" />
        <ng-template #IDErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">请输入ID!</ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name" nzRequired>名称</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="nameErrorTpl">
        <input nz-input formControlName="name" />
        <ng-template #nameErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">请输入名称!</ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username" >用户名</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24"  >
        <input nz-input formControlName="username" />
        
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" >密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24"  >
        <input nz-input type="password" formControlName="password" />
     
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="external"  >外置</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24"  >
        <input nz-input formControlName="external" />
         
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="version">版本</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="verErrorTpl">
        <input nz-input formControlName="version" />
        <ng-template #verErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">请输入版本!</ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="command">命令</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="comErrorTpl">
        <input nz-input formControlName="command" />
        <ng-template #comErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">请输入命令!</ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>


    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="dependencies">依赖</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="depErrorTpl">
        <input nz-input formControlName="dependencies" />
        <ng-template #depErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">请输入依赖!</ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <p>
      Broker账号密码
    </p>
  </form>

</nz-card>